/*
  学习目标：使用useEffect的第二个参数- 总结
     
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [msg, setMsg] = useState('Hello React');

  // 1. 传[]
  // 含义：代表挂载后的生命周期钩子函数，等于componentDidMount
  // 作用：💥发请求、获取DOM、开始定时器
  // useEffect(() => {
  //   console.log(' 挂载后只执行一次 ----->  ');
  // }, []);

  // 2. 传[依赖项]
  // 含义：👍代表挂载后的生命周期钩子函数，等于componentDidMount 和componentDidUpdate 两个二合一
  //      类似vue中watch开了immediately
  // 作用：监听数据的变化，可以做缓存
  useEffect(() => {
    console.log('count变化时才触发回调 ----->  ');
  }, [count]);

  // 3. 不传 ❌基本不用 -每次都触发，浪费性能，容易造成页面卡顿
  // 含义：代表挂载后的生命周期钩子函数，等于componentDidMount 和componentDidUpdate 两个二合一
  useEffect(() => {
    console.log(' 任意状态变化都会触发 ----->  ');
  });

  return (
    <div>
      count -- {count}
      msg -- {msg}
      <button onClick={() => setCount(count + 1)}>点我修改title</button>
      <button onClick={() => setMsg(msg + '~')}>点我修改Msg</button>
    </div>
  );
}
